<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/dl.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="./css/loading.css">
    <script src="./js/jquery-3.7.0.min.js"></script>
</head>

<body>
    <!-- NAVBAR CREATION -->
    <header class="header">
        <nav class="navbar">
            <a href="./index.html">主页</a>
            <a href="#">个人中心</a>
            <a href="./gy.html">关于</a>
            <a href="#">帮助</a>
        </nav>
        <form action="" class="search-bar">
            <input type="text" placeholder="Search...">
            <button><i class='bx bx-search'></i></button>
        </form>
    </header>
    <!-- LOGIN FORM CREATION -->
    <div class="background"></div>
    <div class="container">
        <div class="item">
            <h2 class="logo"><i class='bx bxl-xing'></i>鱼 米 之 乡</h2>
            <!-- 时钟部分 -->
            <div class="main">
                <div style="font-size: 24px;">
                    当前时间是
                </div>
                <div class="clock">
                    12:00:00
                </div>
            </div>
            <script>
                let oClock = document.querySelector('.clock');
                let addZero = (num) => {
                    if (num >= 10) {
                        return num;
                    } else {
                        return `0${num}`;
                    }
                };

                let updateTime = () => {
                    let now = new Date();
                    let time = addZero(now.getHours()) + ':' +
                        addZero(now.getMinutes()) + ':' +
                        addZero(now.getSeconds());
                    oClock.innerHTML = time;
                };

                setInterval(updateTime, 1000);
            </script>
            <div class="text-item">
                <h2>欢迎! <br>
                    <span>
                        来到泰州
                    </span>
                </h2>
                <p>水 城 慢 生 活&emsp;&emsp;尘 世 幸 福 多</p>
            </div>
        </div>
        <div class="login-section">
            <div class="form-box login">
                <form action="">
                    <h2>登&emsp;录</h2>
                    <div class="input-box">
                        <span class="icon"><i class='bx bxs-envelope'></i></span>
                        <input type="text" required>
                        <label>邮箱</label>
                    </div>
                    <div class="input-box">
                        <span class="icon"><i class='bx bxs-lock-alt'></i></span>
                        <input type="password" required>
                        <label>密码</label>
                    </div>
                    <div class="remember-password">
                        <label for=""><input type="checkbox">记 住 我</label>
                        <a href="#">忘 记 密 码</a>
                    </div>
                    <button class="btn">Login In</button>
                    <div class="create-account">
                        <p>创建一个新的账号吗? <a href="#" class="register-link">注册</a></p>
                    </div>
                </form>
            </div>
            <div class="form-box register">
                <form action="">

                    <h2>注&emsp;册</h2>

                    <div class="input-box">
                        <span class="icon"><i class='bx bxs-user'></i></span>
                        <input type="text" required>
                        <label>用户名</label>
                    </div>
                    <div class="input-box">
                        <span class="icon"><i class='bx bxs-envelope'></i></span>
                        <input type="text" required>
                        <label>邮箱</label>
                    </div>
                    <div class="input-box">
                        <span class="icon"><i class='bx bxs-lock-alt'></i></span>
                        <input type="password" required>
                        <label>密码</label>
                    </div>
                    <div class="remember-password">
                        <label for=""><input type="checkbox">我 同 意 这 份 协 议 </label>
                    </div>
                    <button class="btn">登 录</button>
                    <div class="create-account">
                        <p>已经有账号了? <a href="#" class="login-link">登 录</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="./js/index.js"></script>
    <!-- loading动画 -->
    <section class="loader1">
        <div class="loader">
            <svg>
                <filter id="gooey">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
                    <feColorMatrix values="
                                1 0 0 0 0
                                0 1 0 0 0
                                0 0 1 0 0
                                0 0 0 20 -10
                            "></feColorMatrix>
                </filter>
            </svg>
            <span style="--i:1"></span>
            <span style="--i:2"></span>
            <span style="--i:3"></span>
            <span style="--i:4"></span>
            <span style="--i:5"></span>
            <span style="--i:6"></span>
            <span style="--i:7"></span>
            <span style="--i:8"></span>
            <span class="rotate" style="--j:0"></span>
            <span class="rotate" style="--j:1"></span>
            <span class="rotate" style="--j:2"></span>
            <span class="rotate" style="--j:3"></span>
            <span class="rotate" style="--j:4"></span>
        </div>
    </section>
    <script>
        $(window).on("load", function () {
            $(".loader1").fadeOut("slow");
        })
    </script>
</body>

</html>